<template>
  <div>
    <at-popover
      ref="popover1"
      placement="top-start"
      title="标题"
      width="200"
      trigger="hover"
      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    </at-popover>

    <at-popover
      ref="popover2"
      placement="bottom"
      title="标题"
      width="200"
      trigger="click"
      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
    </at-popover>

    <at-button v-popover:popover1>hover 激活</at-button>
    <at-button v-popover:popover2>click 激活</at-button>
    <at-popover
      placement="right"
      title="标题"
      width="200"
      trigger="focus"
      content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
      <at-button slot="reference">focus 激活</at-button>
    </at-popover>
  </div>
</template>

<script>
  export default{

  }
</script>